<!doctype html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script src="/js/vendor/jquery/jquery.js"></script>
    <script src="/js/lib/jQuerytoObject.js"></script>
    <script src="/js/lib/promise.js"></script>
    <script src="/js/lib/API/base.js"></script>
    <script src="/js/lib/API/storage.js"></script>
    <script src="/js/lib/API/runtime.js"></script>
    <script src="/js/lib/API/cookies.js"></script>
    <script src="/js/lib/API/extension.js"></script>
    <script src="/js/lib/API/i18n.js"></script>
    <script src="/js/lib/otp.js"></script>
    <script src="/js/lib/font-awesome.js"></script>
    <script src="/js/vendor/sjcl/sjcl.js"></script>
    <script src="/js/lib/passwordgen.js"></script>

    <link href="/css/vendor/bootstrap.css" media="all" rel="stylesheet"/>
    <script src="/js/ui/password_picker/password_picker.js"></script>
    <link href="/css/vendor/font-awesome.css" media="all" rel="stylesheet"/>
    <link href="/css/password_picker.css" media="all" rel="stylesheet"/>
</head>
<body>
<div id="password_picker">
    <div class="tabs">
        <div class="tab add" data-name="add"><span class="fa fa-plus" aria-hidden="true" t="[add_account, title]"></span></div>
        <div class="tab list active" data-name="list"><span class="fa fa-list" aria-hidden="true" t="[accounts, title]"></span></div>
        <div class="tab search" data-name="search"><span class="fa fa-search" aria-hidden="true" t="[search, title]"></span></div>
        <div class="tab generate" data-name="generate"><span class="fa fa-refresh" aria-hidden="true" t="[password_generator, title]"></span></div>
        <div class="tab ignore" data-name="ignore"><span class="fa fa-ban" aria-hidden="true" t="[ignore_site_tab, title]"></span></div>
        <div class="tab close pull-right"><span class="fa fa-times" aria-hidden="true" t="[close, title]" title="Close"></span></div>
    </div>
    <div class="tab-content">
        <div class="tab-add-content" style="display: none">
            <h2 t="save_site"></h2>
            <div class="rrow">
                <label t="label"></label>
                <input type="text" class="input" name="savepw-label" id="savepw-label"/>
            </div>
            <div class="rrow">
                <label t="username"></label>
                <input type="text" class="input" name="savepw-username" id="savepw-username"/>
            </div>
            <div class="rrow">
                <label t="password"></label>

                <input type="password" class="input" name="savepw-password" id="savepw-password"/>
                <span class="niceInputButtons">
                       <div class="cell renewpw_newac" t="[generate_password, title]">
                           <i class="fa fa-refresh"></i>
                       </div>
                       <div class="cell togglePw" t="[toggle_visibility, placeholder]">
                           <i class="fa fa-eye-slash"></i>
                       </div>
                   </span>
            </div>
            <div class="rrow">
                <label t="vault"></label>
                <select id="savepw-vault" class="input"></select>
            </div>
            <small t="add_hint"></small>
            <hr/>
            <button class="btn btn-success" id="savepw-save" t="save"></button>
            <button class="btn" id="savepw-cancel" t="cancel"></button>
        </div>
        <div class="tab-list-content">
            <div class="no-credentials">
                <div class="btn btn-secondary save" t="btn_save_site"></div>
                <div class="clearfix"></div>
                <div class="btn btn-secondary search" t="btn_search"></div>
                <div class="clearfix"></div>
                <div class="btn btn-secondary gen" t="generate_password"></div>
            </div>
        </div>
        <div class="tab-search-content" style="display: none">
            <input type="text" class="input" id="password_search" t="[search_for, placeholder]" >
            <div id="searchResults">

            </div>
        </div>
        <div class="tab-generate-content" style="display: none">
            <h2 t="generate_password"></h2>
            <div class="pw-gen">
                <div class="input-group">
                    <input type="password" id="generated_password"/>
                    <span class="niceInputButtons">
                       <div class="cell renewpw" t="[generate_password, title]">
                           <i class="fa fa-refresh"></i>
                       </div>
                       <div class="cell togglePwVis" t="[toggle_visibility, placeholder]">
                           <i class="fa fa-eye-slash"></i>
                       </div>
                   </span>
                </div>
                <div class="btn btn-secondary usepwd" t="use_generated_password"></div>
            </div>
            <div class="password_settings">
                <div>
                    <span href="#" class="adv_opt"><i class="fa fa-angle-right"></i> <span t="toggle_advanced"></span></span>
                </div>
                <div class="pw-setting-advanced" style="display: none">
                    <form name="advancedSettings">
                        <label class="pw-len">
                            <span class="label" t="pw_length"></span><br/>
                            <input type="number" name="length" min="1"/>

                        </label>
                        <label class="pull-left clearfix">
                            <input type="checkbox"
                                   id="upper"
                                   name="useUppercase"/>
                            <span class="label sm">A-Z</span>
                        </label>
                        <label class="pull-left">
                            <input
                                    name="useLowercase" type="checkbox"
                                    id="lower"/>
                            <span class="label sm">a-z</span>
                        </label>
                        <label class="pull-left">
                            <input name="useDigits" type="checkbox"
                                   id="digits"/>
                            <span class="label sm">0-9</span>
                        </label>
                        <label class="pull-left">
                            <input type="checkbox" id="special"
                                   name="useSpecialChars"/>
                            <span class="label sm">1$%@#</span>
                        </label>
                        <label class="pull-left digits clearfix">
                            <span class="label" t="min_digits"></span><br/>
                            <input type="number" name="minimumDigitCount" min="0"/>
                        </label>
                        <label class="pull-left clearfix">
                            <input type="checkbox" id="ambig"
                                   name="avoidAmbiguousCharacters"/>
                            <span class="label sm" t="avoid_ambiguous"></span>
                        </label>

                        <label class="pull-left clearfix">
                            <input type="checkbox" name="requireEveryCharType"
                                   id="reqevery"/>
                            <span class="label sm" t="require_every_character_type"></span>
                        </label>
                    </form>
                </div>
            </div>

        </div>
        <div class="tab-ignore-content">
            <h2 t="ignore_site"></h2>
            <div class="text">
                <div style="line-height: 1.5em" t="disable_picker_text"></div>
                <hr>
                <div class="btn btn-warning disable-site" t="disable_site">Disable site</div>
                <div class="btn btn-info disable-page" t="disable_page">Disable page</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
